<template>
    <div class="c-info c-first">
        <div class="c-first-item">
            <c-title>
                {{info.title}}
            </c-title>
            <div class="c-first-one-text" v-html="info.content">
            </div>
        </div>
    </div>
</template>

<script>
    import { cTitle } from '../../../components/main';
    export default {
        name:'content',

        data() {
          return {
              info:{}
          }
        },

        components:{
            cTitle
        },

        mounted() {
            if (this.$route.query.type && this.$route.query.id) {
                this.axios.get(this.$route.query.type, {params:{id: this.$route.query.id}}).then(data => {
                    if (data.status == 200) {
                        data = data.data;
                        this.info = data;
                    } else {
                        this.$message.error('未知错误');
                        this.$router.push('/home/first');
                    }
                })
            } else {
                this.$message.error('未知错误');
                this.$router.push('/home/first');
            }
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import "../../../plugins/assets/css/flex.less";

    .c-first{
        width: 50%;
        margin: 50px auto;
        &-item {
            margin-bottom:50px;
            .c-first-title{
                text-align: center;
                font-weight:bold;
                font-size:30px;
            }
            .c-first-one-text {
                margin: 20px 0;
                .one-text-title {
                    font-size:24px;
                    font-weight:bold;
                    text-align: center;
                    margin: 20px;
                }
                .one-text-content{
                    font-size:18px;
                    font-weight:bold;
                    line-height:28px;
                }
            }
        }
    }

    @media screen and (max-width: 768px) {
        .c-first{
            width: 90%;
            margin: 50px auto;
            &-item {
                margin-bottom:50px;
                .c-first-title{
                    text-align: center;
                    font-weight:bold;
                    font-size:5vw;
                }
                .c-first-one-text {
                    margin: 20px 0;
                    .one-text-title {
                        font-size:3vw;
                        font-weight:bold;
                        text-align: center;
                        margin: 20px;
                    }
                    .one-text-content{
                        font-size:2vw;
                        font-weight:bold;
                        line-height:28px;
                    }
                }
            }
        }
    }
</style>